<template>
  <div id="crowdList" v-if="canShowPage">
    <h1 class="con-right-title">
      人群管理
    </h1>
    <!--上部搜索条件-->
    <top-search :form-inline="formInline" @toSearch="toSearch"></top-search>
    <!-- 操作按钮 -->
    <div class="table-conBtn">
      <el-button type="warning" icon="el-icon-plus" @click="showCreate">
        创建用户人群
      </el-button>
      <el-button type="warning" plain @click="deleteMultPeople">
        批量删除
      </el-button>
      <freshCom @searchList="searchList"></freshCom>
    </div>
    <!--下部table-->
    <el-table
      v-loading="loading"
      :data="tableData"
      stripe
      style="width: 100%"
      @selection-change="handleSelectionChange"
      max-height="490"
      ref="table"
    >
      <el-table-column
        type="selection"
        width="55"
        align="center"
      ></el-table-column>
      <el-table-column type="index" width="60" align="center" label="序号">
        <template slot-scope="scope">
          {{
            scope.$index
              | filterPage(searchParams.pageNum, searchParams.pageSize)
          }}
        </template>
      </el-table-column>
      <el-table-column
        label="人群ID"
        prop="id"
        min-width="120"
      ></el-table-column>
      <el-table-column
        label="群名称"
        prop="name"
        min-width="120"
      ></el-table-column>
      <el-table-column
        label="创建时间"
        prop="createdDate"
        min-width="150"
      ></el-table-column>
      <el-table-column
        label="创建人"
        prop="createdBy"
        min-width="120"
      ></el-table-column>
      <el-table-column label="人群状态" min-width="120">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.enabled"
            active-color="#1DC8A4"
            @change="changeSwitchStatus($event, scope.row, scope.$index)"
          ></el-switch>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="160">
        <template slot-scope="scope">
          <el-button type="text" @click="showPeopleDetail(scope.row.id)">
            查看标签分类
          </el-button>
          <el-button type="text" @click="deleteSinglePeople(scope.row)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--分页-全局组件-->
    <pageCom
      :searchParams="searchParams"
      :total="total"
      @searchList="searchList"
    ></pageCom>
    <create-crowd
      v-if="dialogCreateData.isShow"
      :dialog-data="dialogCreateData"
      @refresh="refresh"
    ></create-crowd>
    <crowd-detail
      v-if="detailDialogData.isShow"
      :dialog-data="detailDialogData"
      @refresh="refresh"
    ></crowd-detail>
  </div>
</template>

<script>
import topSearch from '@component/userManagement/crowdManage/topSearch' // 上部搜索条件
import createCrowd from '@component/userManagement/crowdManage/createCrowd' // 创建人群
import crowdDetail from '@component/userManagement/crowdManage/crowdDetail' // 查看标签分类
import { saveScrollMixins } from '@/mixins/saveScroll'
import {
  getSearchList,
  deleteSingleRequest,
  deleteMultRequest,
  disableRequest,
  enableRequest
} from '@/api/userManagement/userManageAPI'
export default {
  name: 'manManage',
  msg: '人群管理',
  mixins: [saveScrollMixins],
  components: {
    topSearch,
    crowdDetail,
    createCrowd
  },
  data() {
    return {
      // 基本状态
      loading: true,
      page: 1,
      row: 10,
      total: 0,
      table: false,
      dialog: false,
      isShowModal: true,
      detailDialogData: {
        // 详情组件数据
        isShow: false,
        id: ''
      },
      dialogCreateData: {
        // 创建人群
        isShow: false
      },
      searchParams: {
        pageNum: 1, // 当前页数
        pageSize: 10 // 页面显示条数
      },
      // 列表数据
      tableData: [],
      // 搜索条件
      formInline: {
        createTime: '',
        searchStr: '',
        enable: '',
        startTime: '',
        endTime: ''
      },
      // 验证规则
      rules: {
        name: [
          { required: true, message: '请输入群名称', trigger: 'blur' },
          { min: 3, max: 40, message: '长度在 3 到 40 个字符', trigger: 'blur' }
        ]
      },
      // 选中的行
      multipleSelection: [],
      switchDisabled: false,
      powerAry: [],
      powerStr: '',
      canShowPage: true
    }
  },
  activated() {
    this.toTableScrollHeight()
  },
  mounted() {
    // this.getPower()
    this.searchList()
    this.$nextTick(() => {
      setTimeout(() => {
        this.setTableScrollHeight()
      }, 1000)
    })
  },
  methods: {
    /* 获取权限 */
    getPower() {
      let id = this.$route.query.mId
      this.getCurPageMenu(id).then((res) => {
        this.powerAry = res
        this.canShowPage = true
        if (!res.includes(this.powerStr)) {
          this.alertPower(this.powerStr)
          return false
        }
        this.searchList()
      })
    },
    /* 获取列表 */
    searchList() {
      this.loading = true
      let params = { ...this.searchParams }
      for (let item in this.formInline) {
        if (this.formInline[item] !== '') {
          params[item] = this.formInline[item]
        }
      }
      delete params.createTime
      getSearchList(
        params,
        (response) => {
          this.loading = false
          this.total = response.total
          this.tableData = response.rows
        },
        (response) => {
          this.$message({
            message: response.message,
            type: 'warning'
          })
        }
      )
    },
    // 批量删除
    deleteMultPeople() {
      if (this.multipleSelection.length <= 0) {
        this.$message.warning('请至少选择一条数据！')
        return
      }
      this.$confirm(
        `确认要删除选中的${this.multipleSelection.length}条数据吗?`,
        '系统提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      )
        .then(() => {
          let ids = []
          this.multipleSelection.forEach((item) => {
            ids.push(item.id)
          })
          let params = {
            ids
          }
          deleteMultRequest(
            params,
            (response) => {
              this.searchList()
            },
            (response) => {
              this.$message({
                message: response.message,
                type: 'warning'
              })
            }
          )
        })
        .catch(() => {})
    },
    // 查看标签分类
    showPeopleDetail(id) {
      this.detailDialogData.id = id
      this.detailDialogData.isShow = true
    },
    // 删除
    deleteSinglePeople(row) {
      this.$confirm(`确定删除该条人群信息吗？`, '系统提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          deleteSingleRequest(
            row.id,
            (response) => {
              this.searchList()
            },
            (response) => {
              this.$message({
                message: response.message,
                type: 'warning'
              })
            }
          )
        })
        .catch(() => {})
    },
    // checkbox选中事件
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    /* 搜索 */
    toSearch() {
      this.searchParams.pageNum = 1
      this.searchList()
    },
    refresh() {
      this.searchList()
    },
    /* 换页 */
    changePage(page) {
      this.searchParams.pageNum = page
      this.searchList()
    },
    // 状态切换提示
    changeSwitchStatus(event, row, index) {
      row.enabled = !event
      if (row.enabled) {
        this.$confirm('确认要停用人群吗？', '系统提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
            disableRequest(
              row.id,
              (response) => {
                this.$message({
                  message: '修改成功',
                  type: 'success'
                })
                this.searchList()
              },
              (response) => {
                this.$message({
                  message: response.message,
                  type: 'warning'
                })
              }
            )
          })
          .catch(() => {})
      } else {
        this.$confirm('确认要启用人群吗？', '系统提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
            enableRequest(
              row.id,
              (response) => {
                this.$message({
                  message: '修改成功',
                  type: 'success'
                })
                this.searchList()
              },
              (response) => {
                this.$message({
                  message: response.message,
                  type: 'warning'
                })
              }
            )
          })
          .catch(() => {})
      }
    },
    /* 显示创建人群 */
    showCreate() {
      this.dialogCreateData.isShow = true
    }
  }
}
</script>

<style lang="less">
#crowdList {
  @blue: #0d1636;
  .cus-drawer {
    //自定义样式
    .el-drawer__body {
      overflow-y: auto;
      padding: 20px;
    }

    .el-drawer__header {
      border-bottom: 1px solid #dcdfe6;
      padding: 5px 10px 5px 20px;
      margin-bottom: 0;
      font-size: 13px;
      color: @blue;
    }
    h3.title {
      margin-bottom: 10px;
    }
    .cus-divider {
      line-height: 36px;
    }
    .status-line {
      line-height: 26px;

      .el-switch {
        margin-left: 10px;
        vertical-align: -5px;
      }
    }
    .card-description {
      color: #848a9b;
      line-height: 24px;
      padding-top: 10px;
    }
    .cus-drawer_footer {
      width: 100%;
      height: 60px;
      line-height: 60px;
      position: absolute;
      bottom: 0;
      border-top: 1px solid #dcdfe6;
      background-color: #fff;
      display: flex;
      justify-content: flex-end;

      .sub-button {
        padding-top: 0;
        padding-right: 30px;
      }
    }
  }
}
</style>
